<template>
	<div class="replace-phone bg-f5">
		<section class="replace" v-if="show_view">
			<p class="w92 auto black fs12 mt35 mb15">更改成功后，原密码不变</p>
			<ul class="bg-white container">
				<li class="pt15 pb15 border-b layout">
					<label class="fs14 black mr30" for="">+86</label>
					<input class="fs12 c85 flex_1" type="text" placeholder="请输入旧的手机号码" v-model="form.oldphone"> 
				</li>
				<li class="pt10 pb10 border-b layout">
					<label class="fs14 black mr30 block" for="" style="width:23.73px"></label>
					<input class="fs12 c85 flex_1" type="text" placeholder="请使用旧的手机号码接收验证码" v-model="form.oldcode">
					<button class="border fs10 subject pt5 pb5 pl5 pr5 radius" style="border-color:#ea2000" @click="code(1)">
						<template v-if="old_sending">{{ old_minute }} s</template>
						<template v-else>获取验证码</template>
					</button> 
				</li>
				<li class="pt15 pb15 border-b layout">
					<label class="fs14 black mr30" for="">+86</label>
					<input class="fs12 c85 flex_1" type="text" placeholder="请输入新的手机号码" v-model="form.newphone"> 
				</li>
				<li class="pt10 pb10 layout">
					<label class="fs14 black mr30 block" for="" style="width:23.73px"></label>
					<input class="fs12 c85 flex_1" type="text" placeholder="请使用新的手机号码接收验证码" v-model="form.newcode">
					<button class="border fs10 subject pt5 pb5 pl5 pr5 radius" style="border-color:#ea2000" @click="code(2)">
						<template v-if="new_sending">{{ new_minute }} s</template>
						<template v-else>获取验证码</template>
					</button> 
				</li>
			</ul>	
			<button class="btn-button radius block auto fs18 pt10 pb10" :class="{ on : boolean }" style="width:80%;margin-top:30%" @click="submit">立即更换</button>	
		</section>
		<section class="success pt35" v-else>
			<div class="align-center">
				<img style="width:80px" src="../../../assets/img9.png" alt="">
				<p class="fs18 mt20" style="color:#32bd65">绑定成功</p>
			</div>
		</section>
	</div>
</template>

<script>
	import { getCode } from '@/api';
	export default{
		data()
		{
			return{
                old_minute      : 60,
                new_minute      : 60,
				show_view 		: true,
				verify  		: false,
				old_sending     : false,
				new_sending     : false,
				form 			: {
					oldphone : '',
					oldcode  : '',
					newphone : '',
					newcode  : '',
				}
			}
		},
		computed:
		{
			boolean()
			{
				var boolean = false;
 				if( this.form.oldphone && this.form.oldcode && this.form.newphone && this.form.newcode )
				{
					this.verify = true;
					boolean = true;
				}
				else
				{
					this.verify = false;
					boolean = false;
				}

				return boolean;
			}
		},
		methods:
		{
			submit()
			{
				if(!this.verify) return;

				this.$http.post('/setting/changephone',this.form,{ headers : { Authorization : this.$route.query.token } }).then(res =>{
					this.show_view = false;
				})
			},
			code(type)
			{	
				if(type == 1){
					getCode(this.form.oldphone).then( res => {
						this.oldCountDown();
					})
				}
				else
					getCode(this.form.newphone).then( res => {
						this.newCountDown();
					})
			},
			oldCountDown(){
				this.old_sending = true;
				var clear = setInterval( () => {
					if( this.old_minute > 0 ){
						--this.old_minute;
					}else{
						clearInterval(clear);
						this.old_sending = false;
						this.old_minute = 60;
					}
				}, 1000);
			},
			newCountDown(){
				this.new_sending = true;
				var clear = setInterval( () => {
					if( this.new_minute > 0 ){
						--this.new_minute;
					}else{
						clearInterval(clear);
						this.new_sending = false;
						this.new_minute = 60;
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="less">
	.replace-phone{
		.on{
			background-color:#ff0036;
			color: white;
		}
	}
</style>